<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Bootstrap 3, from LayoutIt!</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="">
  <meta name="author" content="">

	<!--link rel="stylesheet/less" href="less/bootstrap.less" type="text/css" /-->
	<!--link rel="stylesheet/less" href="less/responsive.less" type="text/css" /-->
	<!--script src="js/less-1.3.3.min.js"></script-->
	<!--append ‘#!watch’ to the browser URL, then refresh the page. -->
	<link href="css/video-default.css" rel="stylesheet">
	<link href="css/bootstrap.min.css" rel="stylesheet">
	<link href="css/style.css" rel="stylesheet">
    <link  href="css/liquidcarousel.css" rel="stylesheet">
    <link id="colorpage" href="css/cc0000.css" rel="stylesheet">

  <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
  <!--[if lt IE 9]>
    <script src="js/html5shiv.js"></script>
  <![endif]-->

  <!-- Fav and touch icons -->
  <link rel="apple-touch-icon-precomposed" sizes="144x144" href="img/apple-touch-icon-144-precomposed.png">
  <link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/apple-touch-icon-114-precomposed.png">
  <link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/apple-touch-icon-72-precomposed.png">
  <link rel="apple-touch-icon-precomposed" href="img/apple-touch-icon-57-precomposed.png">
  <link rel="shortcut icon"  href="img/favicon.png">
  
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/jquery.video-ui.js"></script>
	<script type="text/javascript" src="js/scripts.js"></script>
   <script type="text/javascript"   src="js/liquidcarousel.js"></script><!-- for technology -->
	<script type="text/javascript"   src="js/jquery.liquidcarousel.pack.js"></script><!-- for technology -->
   

    <script>
    			$(document).ready(
					function(){
						
						 $('#demo1').videoUI({
						  'autoHide':false,
						  'volumeMedia': 1
						}); 
					$('#liquid').liquidcarousel({
							height: 150,		//the height of the list
							duration: 100,		//the duration of the animation
							hidearrows: true	//hide arrows if all of the list items are visible
						});
						
					}
				);
    </script>
</head>

<body class="gradiant">
<div class="container">
	<div class="row clearfix" id="header">
		 <div class="col-md-6 column" id="social">
			            <ul>
            	<li><a class="facebook"></a></li>
                <li><a class="google"></a></li>
                <li><a class="twitter"></a></li>
                <li><a class="linkedin"></a></li>
            </ul>
        	
		</div>
		<div class="col-md-6 column">
        	<img src="img/logo.png" id="logo">
            <ul id="color">
            	<li><a class="red" onClick="page_style('red');"></a></li>
                <li><a class="blue" onClick="page_style('blue');"></a></li>
                <li><a class="green" onClick="page_style('green');"></a></li>
                <li><a class="yellow" onClick="page_style('yellow');"></a></li>
            </ul>
		</div>
	</div>
	<div class="row clearfix" id="nav">
		<div class="col-md-12 column">
			<ul class="nav nav-pills">
				<li class="active">
					<a href="#">Home</a>
				</li>
				<li>
					<a href="#">Open Source </a>
				</li>
				<li>
					<a href="#">ITI</a>
				</li>
 <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Cources <b class="caret"></b></a>
        <ul class="dropdown-menu">
          <li><a href="#">PHP</a></li>
          <li><a href="#">Ruby</a></li>
          <li><a href="#">Apache</a></li>
          <li class="divider"></li>
          <li><a href="#">oprating System</a></li>
          <li class="divider"></li>
          <li><a href="#">Network</a></li>
        </ul>
      </li>
			</ul>
		</div>
	</div><!-- end nav -->
	<div class="row clearfix" id="slider">
		<div class="col-md-12 column" >
			<div class="carousel slide" id="carousel-575751">
				<ol class="carousel-indicators">
					<li class="active" data-slide-to="0" data-target="#carousel-575751">
					</li>
					<li data-slide-to="1" data-target="#carousel-575751">
					</li>
					<li data-slide-to="2" data-target="#carousel-575751">
					</li>
				</ol>
				<div class="carousel-inner">
					<div class="item active">
						<img alt=""  src="img/site1.jpg">
						<div class="carousel-caption">
							<h4>
								First Thumbnail label
							</h4>
							<p>
								Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
							</p>
						</div>
					</div>
					<div class="item">
						<img alt="" src="img/site1.jpg">
						<div class="carousel-caption">
							<h4>
								Second Thumbnail label
							</h4>
							<p>
								Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
							</p>
						</div>
					</div>
					<div class="item">
						<img alt="" src="img/site1.jpg">
						<div class="carousel-caption">
							<h4>
								Third Thumbnail label
							</h4>
							<p>
								Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
							</p>
						</div>
					</div>
				</div> <a class="left carousel-control" href="#carousel-575751" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a> <a class="right carousel-control" href="#carousel-575751" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
			</div>
		</div>
	</div><!-- end slider -->
	<div class="row clearfix" >
		<div class="col-md-12 column" >
        	<p id="register">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus <a class="btn btn-primary" href="#">Registeration Now</a></p>
		</div>
	</div><!-- end reg -->
	<div class="row clearfix" id="services">
		<div class="col-md-12 column">
			<h1>
				Services
			</h1>
			<div class="row">
				<div class="col-md-4">
					<div class="thumbnail">
						<img alt="300x200" src="img/1.png">
						<div class="caption">
							<h3>
								Thumbnail label
							</h3>
							<p>
								Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
							</p>
							<p>
								<a class="btn btn-primary" href="#">Read More</a> 
							</p>
						</div>
					</div>
				</div>
				<div class="col-md-4">
					<div class="thumbnail">
						<img alt="300x200"  src="img/2.png">
						<div class="caption">
							<h3>
								Thumbnail label
							</h3>
							<p>
								Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
							</p>
							<p>
								<a class="btn btn-primary" href="#">Read More</a>
							</p>
						</div>
					</div>
				</div>
				<div class="col-md-4">
					<div class="thumbnail">
						<img alt="300x200" src="img/3.png">
						<div class="caption">
							<h3>
								Thumbnail label
							</h3>
							<p>
								Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
							</p>
							<p>
								<a class="btn btn-primary" href="#">Read More</a> 
							</p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div><!-- end services -->
	<div class="row clearfix" id="event">
		<div class="col-md-12 column">
			<h1>
				Event
			</h1>
			<div class="row clearfix">
				<div class="col-md-8 column">
                	<ul>
                    	<li class="today">
                        	<span>18</span><p><h4>Thumbnail label</h4><p>Cras justo odio, dapibus ac facilisis in</p></p>
                        </li>
                    	<li class="week">
                        	<span>18</span><p><h4>Thumbnail label</h4><p>Cras justo odio, dapibus ac facilisis in</p></p>
                        </li>
                    	<li class="month">
                        	<span>18</span><p><h4>Thumbnail label</h4><p>Cras justo odio, dapibus ac facilisis in</p></p>
                        </li>
                    </ul>
				</div>
				<div class="col-md-4 column">
                	 <div id="calendar">
    <div id="calendar_header"><i class="icon-chevron-left"></i>          <h1></h1><i class="icon-chevron-right"></i>         </div>
    <div id="calendar_weekdays"></div>
    <div id="calendar_content"></div>
  </div>

			</div>
		</div>
	</div><!-- end event -->
	<div class="row clearfix" id="collection">
		<div class="col-md-4 column">
			<h1>
				News 
			</h1>
            			<div class="carousel slide" id="carousel-783283">
				<ol class="carousel-indicators">
					<li data-slide-to="0" data-target="#carousel-783283">
					</li>
					<li data-slide-to="1" data-target="#carousel-783283" class="active">
					</li>
					<li data-slide-to="2" data-target="#carousel-783283">
					</li>
				</ol>
				<div class="carousel-inner">
					<div class="item">
						<img alt="" src="img/site1.jpg" />
						<div class="carousel-caption">
							<h4>
								First Thumbnail label
							</h4>
						</div>
					</div>
					<div class="item active">
						<img alt="" src="img/site1.jpg" />
						<div class="carousel-caption">
							<h4>
								Second Thumbnail label
							</h4>
						</div>
					</div>
					<div class="item">
						<img alt="" src="img/site1.jpg" />
						<div class="carousel-caption">
							<h4>
								Third Thumbnail label
							</h4>
						</div>
					</div>
				</div> <a class="left carousel-control" href="#carousel-783283" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a> <a class="right carousel-control" href="#carousel-783283" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
			</div>
		</div>
		<div class="col-md-4 column" id="video">
			<h1>
				Video
			</h1>
            <div class="videoUiWrapper thumbnail">
              <video  height="214" id="demo1">
                <source src="http://www.youtube.com/watch?feature=player_detailpage&v=_9LLuEvVCP0" type="video/mp4">
                Your browser does not support the video tag.
              </video>
</div> 
		</div>
		<div class="col-md-4 column" id="poll">
			<h1>
				poll
			</h1>
            <h3>what your opinion in our web site  </h3>
               <div class="radio">
                  <label>
                    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
                     great
                  </label>
                </div>
                <div class="radio">
                  <label>
                    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
                    good
                  </label>
                </div>
                <div class="radio">
                  <label>
                    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
                    bad
                  </label>
                </div>
                <a class="btn btn-primary" href="#">Vote</a><a class="btn btn-primary" href="#">Result</a>
		</div>
	</div>
	<div class="row clearfix">
		<div class="col-md-12 column">
			<h1>
				Open source Technologies
			</h1>
        <div id="sponser">
        		<div id="sponserin" >
                            <div class="liquid" id="liquid">
                                <span class="previous"></span>
                                <div class="wrapper">
                                    <ul>
                                        <li><a href="#"><img  src="img/1.png" alt="maknoon store"/></a></li>
                                        <li><a href="#"><img src="img/2.png"  alt="maknoon store"/></a></li>
                                        <li><a href="#"><img src="img/3.png"  alt="maknoon store"/></a></li>
                                        <li><a href="#"><img src="img/4.png"  alt="maknoon store"/></a></li>
                                        <li><a href="#"><img  src="img/1.png" alt="maknoon store"/></a></li>
                                        <li><a href="#"><img src="img/2.png"  alt="maknoon store"/></a></li>
                                        <li><a href="#"><img src="img/3.png"  alt="maknoon store"/></a></li>
                                        <li><a href="#"><img src="img/4.png"  alt="maknoon store"/></a></li>
                                        
                                    </ul>
                                </div>
                                <span class="next"></span>
                            </div>
                
	        </div>
        </div><!-- end sponser-->

            	
		</div>
	</div><!-- end collection -->
    <div id="footet">
<footer>
	
		<div id="footer-widgets">
		<div class="width-container footer-4-column">
			<div id="text-2" class="widget "><h5>About us</h5>			<div class="textwidget">								<p class="form-control-static">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
		</div><div id="blog_subscription-2" class="widget jetpack_subscription_widget"><h5 class="widget-title"><label for="subscribe-field">Subscribe via Email</label></h5>
		<form action="" method="post" accept-charset="utf-8" id="subscribe-blog-blog_subscription-2">
			<p id="subscribe-text">Enter your email address to subscribe to our website and receive notifications of news by email.</p>
			<p id="subscribe-email"><input class="form-control" type="text" name="email" style="width: 95%; padding: 1px 2px"  placeholder="subscribe" id="subscribe-field"/></p>

			<p id="subscribe-submit">
								<input type="submit" class="btn btn-primary" id="subscribe" value="Subscribe"  />
			</p>
		</form>

		
</div>
<div id="nav_menu-2" class="widget widget_nav_menu">
<h5 class="widget-title">More About Us</h5>
        <div class="menu-main-navigation-container">
            <ul id="menu-main-navigation-1" class="menu">
            <li><a>Home</a></li>
            <li><a>Home</a></li>
            <li><a>Home</a></li>
            <li><a>Home</a></li>
            <li><a>Home</a></li>
            <li><a>Home</a></li>
            </ul>
        </div>
</div>
<div class="clearfix"></div>
		</div><!-- close .width-container -->
	</div><!-- close #footer-widgets -->
		
	<div class="width-container">
		
		<div id="copyright">&copy; 2014 All Rights Reserved.</div>		
	<div class="clearfix"></div>
	</div><!-- close .width-container -->
</footer>

</div>
</div>
</div>
	<script>
		function page_style(color){
		var link = document.createElement('link');
		document.getElementById("colorpage").remove();
		link.rel = "stylesheet";
		link.type = "text/css";
		link.id = "colorpage";

			switch (color)
			{
					case 'red':
							link.href = "css/cc0000.css";				
					break;
					case 'green':
							link.href = "css/4dc081.css";
					break;
					case 'blue' :
							link.href = "css/2e75b6.css";
					break;
					case 'yellow':
						link.href = "css/ffc000.css";
					break;
			}
	
		document.head.appendChild(link);
		}
	</script>

</body>
</html>
